Day 7：React Native常用組件

2023 iThome 鐵人賽

DAY 7

Mobile Development

30天React Native之旅：從入門到活用系列第 7 篇

15th鐵人賽

AndyTsai

2023-09-22 10:28:27

567 瀏覽

分享至

基礎組件

<Text />

在 Web 中，我們可以在HTML任何地方放置文字，因為瀏覽器知道如何渲染和解析這些文字。但是，React Native 不是瀏覽器環境，它會使用原生文本組件進行渲染，所以只要是文字都必須包裹在 <Text /> 組件中，不然編譯就會直接噴錯。
```
<Text>Hello World<Text/>
```
常用屬性：
- selectable (boolean)： 是否可以長按選擇文字、複製、黏貼
- ellipsizeMode (enum)： 在 Web 中，有時文字太長我們會用「…」取代，而在 React Native 的 <Text /> 元件中，此功能已被內建。
  
  它有四種模式
  - head：…efg
  - middle：ab…yz
  - tail：abcd...
  - clip：直接截斷，不會顯示「…」
- numberOfLines（number）： 設定文字的最大行數，常與ellipsizeMode搭配使用
在使用<Text />時，建議都要指定文字顏色。因為Android深色模式會自動調整預設文字顏色，可能會造成顯示上的問題。
<TextInput />

輸入框組件，對應於Web就是<Input />。

常用屬性：
- autoFocus (boolean)： 自動獲取焦點
- defaultValue (string)： 初始值
- placeholder (string)、placeholderColor (string)： 站位字符和顏色
- maxLength (number)： 限制可輸入的最大字數
- keyboardType (string)： 鍵盤類型
  - default：預設鍵盤。
  - number-pad：數字鍵盤，不包含小數點或其他特殊字符。
  - decimal-pad：包含小數點的數字鍵盤。
  - numeric：純數字鍵盤，可能包含標點和其他符號。
  - email-address：為郵箱地址設計的鍵盤。
  - phone-pad：電話號碼輸入鍵盤。
- onChange (function)： 當輸入框的文字發生變化時的回調函數。
<Image />

用於顯示圖片，包括網絡圖片、靜態圖片。
```
//本地圖片
<Image source={require('./path-to-your-image.png')} />
//網路圖片
<Image source={{uri: 'https://path-to-your-image.png'}} />
```
常用屬性：
- source (object)： 指定圖片的來源，可以是URL、本地圖片。
- resizeMode (string)： 圖片適應模式，如cover、contain、stretch、repeat、center。
- onLoad (function)、onError (function)： 加載圖片時的事件處理函數。
- defaultSource (object)： 加載時顯示的圖片
<ActivityIndicator />
加載指示器。常用於等待非同步操作的完成，如網絡請求。要注意的是它的外觀在Android和iOS上是不同的。這是因為React Native會去直接調用各平台的原生加載指示器組件。
```
<ActivityIndicator size="large" color="#0000ff" />
```
左Android，右IOS

常用屬性：
- size (string)： 決定指示器的大小，可以是small或large。
- color (string)： 設定指示器的顏色。

<Switch />
開關控件
常用屬性：

value (boolean)： 當前開關的狀態。
disabled (boolean): 是否禁用。
onValueChange (function)： 當開關狀態變化時觸發的回調函數。
thumbColor (string)： 開關圓點的顏色。
trackColor (object)： 開關軌道的顏色，可以指定true和false的顏色，
例如：
```
trackColor: { false: '#767577', true: '#81b0ff' }。
```
tintColor (string)： 用於自定義其他顏色的属性

<Switch />範例

const NightModeSwitcher = () => {
  const [isNightMode, setIsNightMode] = useState(false);

  const toggleNightMode = (value) => {
    setIsNightMode(value);
  };

  return (
    <View style={isNightMode ? styles.darkContainer : styles.lightContainer}>
      <Text style={isNightMode ? styles.darkText : styles.lightText}>
        Night Mode
      </Text>
      <Switch
        value={isNightMode}
        onValueChange={toggleNightMode}
        thumbColor={isNightMode ? '#f5dd4b' : '#f4f3f4'}
        trackColor={{ false: '#767577', true: '#81b0ff' }}
      />
    </View>
  );
};

容器組件

<View />

基本的容器組件，可對應於Web中的<div />。
```
<View>
    {/* 其他子組件 */}
</View>
```
<ScrollView />

支援滾動的容器組件，當內容的總高度（或寬度）超過ScrollView的高度時，它就會變得可滾動。
```
<ScrollView>
    {/* 其他子組件 */}
</ScrollView>
```
常用屬性：
- horizontal (boolean)： 設為true時，支援水平滾動，默認為垂直滾動。
- showsVerticalScrollIndicator (boolean)、showsHorizontalScrollIndicator (boolean)： 控制滾動條的顯示。
- pagingEnabled (boolean)： 當設為true時，滾動操作會停在子組件邊界上，可以用於製作輪播圖或分頁滾動效果。
<WebView />

用於嵌入網頁，與Web的iframe類似。
```
<WebView source={{ uri: 'https://www.example.com' }} />
```
常用屬性：
- source (object/string): 設定要載入的網頁。可以是一個包含 uri 的物件（例如：{ uri: 'https://www.example.com' }），或者直接是一個HTML字串
- onLoad (function): 網頁加載完成時的回調函數。
- onLoadStart (function): 網頁開始加載時的回調。
- onError (function): 網頁加載出錯時的回調。
- javaScriptEnabled (boolean): 是否啟用 JavaScript 執行。
- injectedJavaScript (string): 在網頁加載完成後執行的 JavaScript 代碼。
- scrollEnabled (boolean): 是否允許滾動。
<Touchable />

這實際上是一系列的組件，包括TouchableOpacity（觸摸時降低透明度）、TouchableHighlight（觸摸時顯示高亮背景）、TouchableWithoutFeedback（無任何視覺反饋）等。。
```
<TouchableOpacity onPress={() => alert('Tapped!')}>
    <Text>Tap Me</Text>
</TouchableOpacity>
```
常用屬性：
- onPress (function): 點擊時的回調函數。
- style (object): 定義組件的樣式。
- hitSlop (object): 定義可點擊區域的外部擴展。
- disabled (boolean): 如果設為 true，則禁用 touchable 的所有交互。
<Modal />

基本的對話框組件，會蓋在當前頁面的最上層。

常用屬性：
- visible (boolean): 決定是否可見。
- animationType (string): 定義顯示和消失時的動畫。有三個選項：'slide', 'fade', 和 'none'.
- onRequestClose (function): 在 Android 平台上，此函數會在用戶按下實體返回鍵時被調用，通常用於隱藏Modal。

列表組件

<VirtualizedList />

其實用ScrollView就可以做列表了，但當資料量增加，特別是長列表的情況，性能會很差，卡頓、延遲都有可能出現。

為了解決這個問題，React Native在0.43版本導入了VirtualizedList，比較有經驗的人看這名稱可能就知道是什麼了，VirtualizedList的概念在Web開發中也相當常見，其策略就是只渲染可見範圍，當用戶滾動時不在範圍內的元素會被卸載，而新進入的元素則會被渲染，這種策略大大節省了資源，提高了性能

不過我們在實務上不太會直接使用，直接使用它可能會讓開發過程變得複雜。React Native為我們提供了更為簡單和專用的封裝組件，如FlatList和SectionList。
<FlatList />

FlatList是基於VirtualizedList的高級封裝，提供了一系列方便的API和配置選項，適合於多數列表需求，從基本到高階。
```
<FlatList 
    data={[{key: 'a'}, {key: 'b'}]}
    renderItem={({item}) => <Text>{item.key}</Text>}
/>
```
常用屬性：
- data (array): 要渲染的資料。
- renderItem (function): 每列要渲染樣子。
- keyExtractor (function): 用於指定每一項的key。
FlatList的功能還有很多，後續文章會在專文撰寫
<SectionList />

也是基於VirtualizedList的封裝，但特別為列表分組、分段列表而設計。適用於需要組織和呈現分段數據的場景。
```
<SectionList
    sections={[
        {title: 'A', data: ['Apple', 'Avocado']},
        {title: 'B', data: ['Banana', 'Blueberry']},
        ...
    ]}
    renderItem={({item}) => <Text>{item}</Text>}
    renderSectionHeader={({section}) => <Text>{section.title}</Text>}
/>
```
常用屬性：
- sections (array): 包含所有分段的資料。
- renderItem (function): 每列要渲染樣子。
- renderSectionHeader (function): 分段的標題。